<template>
	<view style="min-height: 100vh;background-color: #fff;">
		<dev-navbar :title="title"></dev-navbar>
		<!-- 评估卡片 -->
		<view class="evaluation-card-box">
			<view class="every-evaluation-card" :style="{'background-image':`url(${item.coverPicUrl})`}"
				v-for="(item,index) in list" :key="index">
				<view class="evaluationStatus" :style="{'background':item.assessmentStatus==0?'#F5A623':'#81C042'}">
					{{item.assessmentStatus==0?'未评估':'已评估'}}
				</view>
				<view class="card-information">
					<view class="evaluation-title">
						<text>
							{{item.topicName}}
						</text>
					</view>
					<view class="appraisal-value text-line">
						{{item.topicDescShort}}
					</view>
					<view @click="onClick(item)" class="evaluation-button" :style="{'background':item.buttonColor}">
						开始评估
					</view>
				</view>


			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '健康评估',
				list: [],
				// list: [{
				// 		assessmentStatus: 0, //0未评估； 1已评估
				// 		topicName: '“2+1”健康风险评估',
				// 		topicDesc: '全面了解自己的健康状态',
				// 		buttonColor: '#0B8AD0',
				// 		coverPicUrl: 'http://static.bsyjk.cn/shoppingMall/1E53138B5C5F4CCBB135C2C97AC6A7FE.png',
				// 	},
				// 	{
				// 		assessmentStatus: 1, //0未评估； 1已评估
				// 		topicName: '非医疗高血压管理专项评估',
				// 		topicDesc: '全面了解自己的健康状态',
				// 		buttonColor: '#3CC6DD',
				// 		coverPicUrl: 'http://static.bsyjk.cn/shoppingMall/C5BCD601561B448B922857A8C40EAC1E.png'
				// 	}
				// ],
			};
		},
		onLoad() {
			this.getPaperTopicList();
		},
		methods: {
			onClick(item){
				if(item.topicTypeId!=0){//专项
					this.$urouter.navigateTo({
						url: '/pagesHome/start-assessment/start-assessment',
						params: {
							topicId: item.topicId,
							topicName:item.topicName
						}
					});
				}else{//2+1
					this.$urouter.navigateTo({
						url: '/pages/subpackage/home/oneAccess/evaluating',
						params: {
							// topicId: item.topicId,
						}
					});
				}
			},
			getPaperTopicList() {
				this.$api.get(global.apiUrls.getPaperTopicList, {
					platform: 1,
				}).then(res => {
					if (res.data.result) {
						this.list = res.data.result;
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.evaluation-card-box {
		padding: 32rpx 34rpx;

		.every-evaluation-card {
			width: 682rpx;
			height: 268rpx;
			margin-bottom: 34rpx;
			background-size: 100% 100%;
			border-radius: 16rpx;

			.evaluationStatus {
				width: 120rpx;
				height: 50rpx;
				text-align: center;
				line-height: 50rpx;
				color: #fff;
				font-size: 24rpx;
				border-radius: 16rpx 8rpx 8rpx 0rpx;
			}

			.card-information {
				margin-top: 20rpx;
				padding: 0rpx 42rpx;

				.evaluation-title {
					font-size: 32rpx;
					font-weight: 500;
					color: #FFFFFF;
				}

				.appraisal-value {
					margin-top: 6rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #FFFFFF;
				}

				.evaluation-button {
					margin-top: 20rpx;
					width: 170rpx;
					height: 64rpx;
					border-radius: 20rpx;
					text-align: center;
					line-height: 64rpx;
					font-size: 30rpx;
					font-weight: 400;
					color: #FFFFFF;
					text-decoration: underline;
					// background: rgba(0, 0, 127, 0.1);
				}
			}
		}
	}
</style>
